/**ducument navlist css**/
/**公共部分**/
*{
    margin: 0px;
    padding:0px;
}
a{
    text-decoration: none;
}
ul li{
    list-style: none;
}
//加载icon字体
@font-face {font-family: 'iconfont';
    src: url('../iconfont/iconfont.eot'); /* IE9*/
    src: url('../iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../iconfont/iconfont.woff') format('woff'), /* chrome、firefox */
    url('../iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}


/****头部固定位置******/
#header_fixed{
    width: 100%px;
    height: 20px;
    background: #000;
}
/****头部区域开始*****/
#header{
    width: 100%;
    height: 100px;
    .header_content{
        width: 980px;
        height: 100px;
        margin: 0 auto;
        position: relative;
        .logo{
            width: 460px;
            height: 100px;
            position: absolute;
            left:100px;
            top:0px;
            img{
                width:460px;
                height:100px;
            }
        }
        .login{
            width:210px;
            height: 70px;
            position: absolute;
            right: 0px;
            top:0px;
            a{
                display: block;
                width:60px;
                height:70px;
                float: left;
                margin-left:10px;
                background: url(../images/icons.png) -5px -121px;
                text-align: center;
                font:400 12px/60px '微软雅黑';
                color:#000000;
                span{
                    display:block;
                    width:40px;
                    height: 40px;
                    margin: 10px auto;
                    background: url(../images/icons.png) -3px -2px;
                }
                &:hover span{
                    background: url(../images/icons.png) -126px -2px;
                }
            }
        }
        //已登录
       .logined{
           width:400px;
           height: 55px;
           position:absolute;
//         background: orange;
           top:20px;
           right:0px;
           a{
               display:block;
               float: right;
               padding-left:20px;
               font:400 16px/50px '微软雅黑';
               color:#333;
           }
           span{
               color:red;
           }
           .face{
               width:50px;
               height:50px;
               img{
                   width:100%;
                   height:100%;
                   border-radius:25px;
               }
           }
       }
    }
}
/**
     * 菜单栏
 */
#nav{
    width:100%;
    height:54px;
    .nav_content{
        width:980px;
        height:54px;
        margin:0 auto;
        position:relative;
        a{
            display:block;
            font:700 16px/54px '微软雅黑';
            color:#000;
            float:left;
            padding:0px 5px;
            margin-right:30px;
        }
        .search{
            width:235px;
            height:30px;
            position:absolute;
            top:10px;
            right:0px;
            background:url(../images/ico.png) 0px -2144px;
            form{
               .text{
                   display:block;
                   position: absolute;
                   border: none;
                   top: 6px;
                   left: 10px;
                   width:170px;      
                }
                .sbt{
                    display:block;
                    position: absolute;
                    top:6px;
                    right:0px;
                    width:45px;
                    border:none;
                    background:url(../images/ico.png) 8px -2193px;
                } 
            }
            
        }
    }
    
}

/***********************分类css*****************************************/
/**分类***/
#category{
    padding-top:20px;
    width: 980px;
    margin: 0 auto;
    position: relative;
//  height:310px;
     .c_title{
            width:200px;
            height:30px;    
            position: absolute;
            top:-10px;
            left:0px;
            z-index: 1;
            span.s{
                display: block;
                width:200px;
                height:30px;
                position: absolute;
                top:8px;
                left:0px;
                
                background: url(../images/nav_t.png) no-repeat;
//              background: red;
                .ico{
                    display:block;
                    width: 12px;
                    height: 8px;
                    background: url(../images/list_ico.png);
                    position: absolute;
                    top:11px;
                    right: 70px;
                }
            }
            h2{
                width:200px;
                height:30px;
                font:400 14px/30px '微软雅黑';
                color:#FFF;
                text-indent: 20px;
                letter-spacing: 10px;
//              &:hover .ico{
//                  transform:rotate(180deg);
//                  transition: transform 0.5s;
//              }
//              .ico{
//                  transform:rotate(0deg);
//                  transition: transform 0.5s;
//              }
            }
        }
        .nav_all{
            width: 160px;
            position: absolute;
            background: #FFF;
            top: 20px;
            left: 0px;
            z-index: 1;
            margin-top: 10px;
            height: 0;
            overflow: hidden;
            li{
                width: 160px;
                height: 30px;
                margin-top: 5px;
                background: red;
                text-indent: 25px;
                letter-spacing: 7px;
                position: relative;
//              box-shadow: 0px 0px 8px rgba(137,146,151,0.2);
                
                a{
                    font:400 12px/30px '微软雅黑';
                    color: #555555;
                }
                &:hover i.down_ico{
                    width:9px;
                    height: 10px;
                    display: block;
                    position: absolute;
                    left: 10px;
                    top: 10px;
                    background: url(../images/down_ico.png);
                }
            }
            .li00{
                background: url(../images/bg_li1.png);
                border:1px solid #E0DEDE;
                a{
                    font:400 14px/30px '微软雅黑';
                }
            }
            .li0{
                background: rgba(221,221,221,1);
            }
            .li1{
                background: rgba(221,221,221,0.9);
            }
            .li2{
                background: rgba(221,221,221,0.8);
            }
            .li3{
                background: rgba(221,221,221,0.7);
            }
            .li4{
                background: rgba(221,221,221,0.6);
            }
            .li5{
                background: rgba(221,221,221,0.5);
            }
            .li6{
                background: rgba(221,221,221,0.4);
            }
            
        }
        
     //所有分类的样式
        .c_title_all{
            width:66px;
            height:18px;    
            position: absolute;
            top:12px;
            left:30px;
            text-align: center;
            z-index: 1;
            span.s_all{
                display: block;
                width:68px;
                height:7px;
                position: absolute;
                top:8px;
                left:0px;
                background: url(../images/c_title.png) no-repeat;
            }
            h2{
                width:66px;
                height:18px;
                position: absolute;
                font:400 14px/18px '微软雅黑';
                color:#222;
            }
        }
      
    .c_content{
        border-top:4px solid #000000;
        width:980px;
        margin:0 auto;
        position: relative;
        overflow: hidden;
        
        .c_box{
            width:235px;
            height:138px;
            float:left;
            margin-right:10px;
            margin-top:10px;
            border:1px solid #E6E7E8;
            box-shadow: 0px 0px 8px rgba(137,146,151,0.2);
            &.box0{
                background:url(../images/c1.png) no-repeat 150px 80px;
                dd a{
                    padding: 0px 5px;
                }
            }
            &.box1{
                background: url(../images/c2.png) no-repeat 150px 80px;
                dd a{
                    padding: 0px 5px;
                }
            }
            &.box2{
                background:url(../images/c3.png) no-repeat 150px 80px;
                dd a{
                    padding: 0px 5px;
                }
            }
            &.box3{
                background:url(../images/c4.png) no-repeat 145px 55px;
                margin-right:0px;
            }
            &.box4{
                background:url(../images/c5.png) no-repeat 150px 60px;
            }
            &.box5{
                background:url(../images/c6.png) no-repeat 140px 50px;
            }
            &.box6{
                background:url(../images/c7.png) no-repeat 130px 50px;
            }
            &.box7{
                background:url(../images/c8.png) no-repeat 130px 50px;
                margin-right:0px;
            }
            dl{
                width:235px;
                height:45px;
                margin-top:40px;
                dt{
                    width:70px;
                    height:45px;    
                    float:left;
                    font:400 14px/22px '微软雅黑';
                    text-align:right;
                    padding:2px 8px;
                    border-right:1px solid #000000;
                    a{
                        color:#000;
                    }
                    i{
                        font:700 22px/22px '微软雅黑';
                    }
                }
                dd{
                    padding: 0px 5px;
                    a{
                        font:400 12px/22px '微软雅黑';
                        color:#666;
                        float:left;
                        padding:0px 10px;
                        border: 1px solid #FFF;
                        &:hover{
                            border: 1px solid #E0BCA5;
                            border-radius: 10px;
                        }
                        &.selected{
                            border: 1px solid #E0BCA5;
                            border-radius: 10px;
                            background: #E0BCA5;
                        }
                    }
                }
            }
        }
    }
    
}
/**************************************筛选区域************************************************************/
#select{
    width: 980px;
    margin: 0 auto;
    .se_box{
        width: 980px;
        height: 208px;
        overflow: hidden;
        border: 1px solid #E0DEDE;
        box-shadow: 0px 0px 8px rgba(137,146,151,0.2);
        margin-top:30px;
        padding-bottom:40px;
        position: relative;
        .more{
            width: 50px;
            height: 25px;
            background: rgba(137,146,151,0.2);  
            position: absolute;
            right: 0px;
            bottom: 0px;
            font:400 12px/22px '微软雅黑';
            text-align: center;
            cursor: pointer;
        }
       .se_cont{
        width: 940px;
        padding: 20px;
        dl{
            width: 920px;
            height: auto;
            border-bottom: 1px dotted #E0DEDE;
            overflow: hidden;
            padding: 10px;
            &.final_dl{
                border-bottom: 1px dotted #FFF;
            }
            dt{
                width: 90px;
                height: auto;
                float: left;
                text-align: left;
                text-indent: 20px;
                font:400 14px/22px '微软雅黑';
            }
            dd{
                float: left;
                font:400 12px/22px '微软雅黑';
                a{
                    color: #666666;
                    display: block;
//                  width: 40px;
                    height: 23px;
                    text-align: center;
                    float: left;
                    padding: 0px 10px;
                    margin: 0px 5px;
                    border:1px solid #FFF;
                    &:hover{
                        border:1px solid #E0BCA5;
                    }
                }
                .a_selected{
                   background: #E0BCA5; 
                }
            }
        }
        
      } 
    }
    
    
}

/*************************************产品列表********************************/
#list{
    width:980px;
    margin: 80px auto;
    overflow: hidden;
    //无商品提示语
    .error{
        width: 980px;
        height: 200px;
        h3{
            line-height: 200px;
            text-align: center;
        }
    }
    .l_title{
       width:980px;
       height:30px;
       h2{ 
           width:80px;
           height: 25px;
           text-align: center;
           font:400 20px/25px '微软雅黑';
           border-right:5px solid #000000;
           border-left: 5px solid #000000;
           float:left;
           margin-right:10px;
       }
       a{
           display:block;
           heigth:25px;
           float:left;
           padding:0px 10px;
           margin:0px 5px;
           font: 400 12px/25px "微软雅黑";
           color:#666;
           background: #ECECEC;
           border-radius: 15px;
           &.choose{
               background: #000000;
               color:#FFF;
           }
           &:hover{
               background: #999;
               color:#FFF;
           }
       } 
       span.t_dot{
           display: block;
           float:left;
           width:700px;
           margin:10px 0px 10px 10px;
           height:1px;
           border-top:3px dotted #999;
       }   
    }
    .product{
        margin-top:30px;
        width:312px;
        height:460px;
        float:left;
        border:1px solid #FFF;
        position: relative;
        margin-right:10px;
        &:hover{
            border: 1px solid #E6E7E8;
        }
        a.p_img{
            width:290px;
            height:290px;
            position: absolute;
            top:10px;
            left:10px;
            background: red;
            img{
                width:100%;
                height:100%;
            }
        }
        .p_infor{
            width:180px;
            height:106px;
            position:absolute;
            top:340px;
            left:66px;
            border-top:1px solid #E6E7E8;
            border-bottom:1px dashed #E6E7E8;
            .p_price{
                width:120px;
                height:20px;
                position: absolute;
                top:-10px;
                left:30px;
                font:400 12px/20px '微软雅黑';
                background:#FFF;
                .sp{
                    position: absolute;
                    top:0px;
                    left:10px;
                }
                .pp{
                    display: block;
                    width: 30px;
                    height: 20px;
                    position: absolute;
                    top:0px;
                    right:10px;
                    overflow: hidden;
                }
                .count{
                    display: block;
                    width: 30px;
                    height: 40px;
//                  background: red;
                    position: absolute;
                    top:0px;
                    right:0px;
                    .c{
                       position: absolute;
                        top:0px;
                        right:0px; 
                    }
                    .add1{
                        position: absolute;
                        bottom:0px;
                        right:0px;
                    }
                }
                .dis_like{
                    display:block;
                    position: absolute;
                    top: 5px;
                    left:60px;
                    width:16px;
                    height:13px;
                    cursor: pointer;
                    background:url(../images/liked.png) no-repeat;
                    display: none;
                }
                .like{
                    display:block;
                    position: absolute;
                    top: 5px;
                    left:60px;
                    width:16px;
                    height:13px;
                    background:url(../images/like.png) no-repeat;
                    cursor: pointer;
                    &:hover{
                        background:url(../images/liked.png) no-repeat;
                    }
                }
            }
            a{
               font:400 12px/22px '微软雅黑';
               &.p_name{
                  display: inline-block;
                    width: 180px;
                    text-align: center;
                    position:absolute;
                    top:30px;
                    left:0px;
                    color:#222;
                 }

                 &.tag1{
                    position: absolute;
                    bottom: 20px;
                    left:40px;
                    color: #666666;
                  }
                  &.tag2{
                    position: absolute;
                    bottom: 20px;
                    right: 40px;
                    color: #666666;
                  }
              }
              span.dot{
                 display: block;
                 width:6px;
                 height:6px;
                 position: absolute;
                 bottom: 27px;
                 left:85px;
                 border-radius: 6px;
                 background: #666666;
              }
        }
    }
}



/*****************************************网站底部*******************************/

#footer{
    width:100%;
    height:255px;
    background:#000000;
    .foot_wrap{
        width: 980px;
        height:255px;
        margin:0 auto;
        .say{
            width:675px;
            height:115px;
            float:left;
            .p1{
                font:400 18px/80px '微软雅黑';
                color:#FFF;
            }
            .p2{
                font:400 16px/50px '微软雅黑';
                color:#FFF;
                text-align:right;
            }
        }
        .foot-logo{
            width:220px;
            height:200px;
            float:left;
        }
        p.infor{
            float:left;
            width:980px;
            height:30px;
            border-bottom:1px solid #666;
            margin-top:30px;
            font:400 12px/22px '微软雅黑';
//          text-align:center;
            color:#666;
            a{
                color:#666;
            }
        }
        p.link{
            float:left;
            font:400 12px/22px '微软雅黑'; 
            color:#666;
        }
    }
}



/***
 * 网站底部end
 */

